<template>
  <div>
    <el-menu default-active="1" active-text-color="#409EFF"
      style="    border:none ; --el-menu-hover-bg-color: rgba(242, 22, 24,.06)" class="el-menu-vertical-demo"
      background-color="#E9F3FD" text-color="#8B99BD" :collapse="collapsed" router>
      <el-menu-item index="/adminHome" @click="toPath('adminHome')">
        <el-icon>
          <Coffee />
        </el-icon>
        <template #title>首页</template>
      </el-menu-item>
      <el-menu-item index="/user" @click="toPath('user')">
        <el-icon>
          <Coffee />
        </el-icon>
        <template #title>用户管理</template>
      </el-menu-item>
      <el-menu-item index="/room" @click="toPath('room')">
        <el-icon>
          <Coffee />
        </el-icon>
        <template #title>房间管理</template>
      </el-menu-item>
      <el-menu-item index="/video" @click="toPath('video')">
        <el-icon>
          <Coffee />
        </el-icon>
        <template #title>视频管理</template>
      </el-menu-item>
      <el-menu-item index="/test" @click="toPath('test')">
        <el-icon>
          <Coffee />
        </el-icon>
        <template #title>测试管理</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
//引入图标
import { Coffee } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
// 父传子defineprops
defineProps(
  {
    collapsed:
    {
      type: Boolean
    }
  }
)
// 路由跳转
const router = useRouter()
const toPath = (item: string) => {
  router.push({ name: item })
}

</script>
<style scoped>
.logo {
  height: 60px;
  /* background-color: #545c64; */
  line-height: 60px;
  text-align: center;
  width: 200px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100vh;
}

.el-menu-vertical-demo {
  height: 100vh;
}
</style>
